<template>
  <div class="app-container">
    <img src="@/assets/cleaning/bg.png" class="bg-img" />
    <div class="monitor-wrapper">
      <div class="monitor-header">
        <img src="@/assets/cleaning/load-icon.png" class="load-icon" />
        <div class="structure">
          <img src="@/assets/cleaning/structure.png" class="structure" />
          <div class="alert-wrapper" style="left: 30px; top: 100px">
            <img src="@/assets/cleaning/alert.png" class="alert" />
          </div>
          <div class="alert-wrapper" style="left: 200px; top: 40px">
            <img src="@/assets/cleaning/alert.png" class="alert" />
          </div>
          <div class="alert-wrapper" style="left: 500px; top: 60px">
            <img src="@/assets/cleaning/alert.png" class="alert" />
          </div>
          <div class="alert-wrapper" style="left: 700px; top: 50px">
            <img src="@/assets/cleaning/alert.png" class="alert" />
          </div>
          <div class="alert-wrapper" style="right: 100px; bottom: 50px">
            <img src="@/assets/cleaning/alert.png" class="alert" />
          </div>
        </div>
        <img src="@/assets/cleaning/tip.png" class="tip" />
      </div>
      <div class="monitor-status">
        <div class="monitor-status-wrapper">
          <div class="monitor-status-item">
            <img
              src="@/assets/cleaning/status-title.png"
              class="status-title-img"
            />
            <div class="monitor-status-item-title">龙门吊运行状态</div>
            <div class="timer">数据更新时间：2025-03-21 12:30:24</div>
          </div>
          <div class="monitor-count-item">
            <img src="@/assets/cleaning/count-title.png" class="count-img" />
            <div class="monitor-count-item-title">
              <div>当天吊运工件数量计数</div>
              <div class="num">1090件</div>
            </div>
            <div
              class="monitor-position"
              v-for="(item, idx) in positions"
              :key="idx"
            >
              <div class="monitor-position-left">
                <img
                  src="@/assets/cleaning/position-bg.png"
                  style="width: 100%"
                />
                <div class="monitor-position-left-title">{{ item.title }}</div>
              </div>
              <div class="monitor-position-right">
                <div class="monitor-position-right-item green">
                  <img src="@/assets/cleaning/run-bg.png" style="width: 100%" />
                  <div class="monitor-position-right-desc">
                    <img
                      src="@/assets/cleaning/green.png"
                      style="width: 10px; height: 10px"
                    />
                    <div class="run-title">运行位置</div>
                    <div class="run-num">{{ item.position }}</div>
                  </div>
                </div>
                <div class="monitor-position-right-item blue">
                  <img src="@/assets/cleaning/run-bg.png" style="width: 100%" />
                  <div class="monitor-position-right-desc">
                    <img
                      src="@/assets/cleaning/blue.png"
                      style="width: 10px; height: 10px"
                    />
                    <div class="run-title">运行速度</div>
                    <div class="run-num">{{ item.speed }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="monitor-status-wrapper">
          <div class="monitor-status-item">
            <img
              src="@/assets/cleaning/status-title.png"
              class="status-title-img"
            />
            <div class="monitor-status-item-title">真空吸盘运行状态</div>
          </div>
          <div class="monitor-count-item">
            <img src="@/assets/cleaning/count-title.png" class="count-img" />
            <div class="monitor-count-item-title">
              <div>真空吸盘数量</div>
              <div class="num">1090件</div>
            </div>
            <div class="monitor-count-status">
              <img src="@/assets/cleaning/empty-bg.png" class="empty-bg-img" />
              <div class="monitor-count-status-desc">
                <div class="title">真空泵真空度（%）</div>
                <div class="num"><span>69</span>/100</div>
                <el-progress
                  :percentage="69"
                  :color="customColor"
                  :show-text="false"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
        <div class="monitor-status-wrapper" style="width: 30%">
          <div class="monitor-status-item">
            <img
              src="@/assets/cleaning/status-title.png"
              class="status-title-img"
            />
            <div class="monitor-status-item-title">龙门吊异常状态</div>
          </div>
          <div class="monitor-status-run-wrapper" style="margin-top: 15px">
            <div class="monitor-status-run">
              <img src="@/assets/cleaning/battery.png" class="battery" />
              <div>x轴状态正常</div>
            </div>
            <div class="monitor-status-run">
              <img src="@/assets/cleaning/battery.png" class="battery" />
              <div>y轴状态正常</div>
            </div>
            <div class="monitor-status-run">
              <img src="@/assets/cleaning/battery.png" class="battery" />
              <div>z轴状态正常</div>
            </div>
          </div>
          <div class="monitor-status-item">
            <img
              src="@/assets/cleaning/status-title.png"
              class="status-title-img"
            />
            <div class="monitor-status-item-title">真空吸盘异常状态</div>
          </div>
          <div class="monitor-status-run-wrapper" style="margin-top: 15px">
            <div class="monitor-status-run">
              <img src="@/assets/cleaning/battery.png" class="battery" />
              <div>吸盘工作正常</div>
            </div>
            <div class="monitor-status-run">
              <img src="@/assets/cleaning/battery.png" class="battery" />
              <div>真空吸盘真空度正常</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "monitor",
  data() {
    return {
      customColor: " #69D9FE",
      positions: [
        {
          title: "X轴",
          position: "54m",
          speed: "120m/s",
        },
        {
          title: "Y轴",
          position: "54m",
          speed: "120m/s",
        },
        {
          title: "Z轴",
          position: "54m",
          speed: "120m/s",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  position: relative;
  .bg-img {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    z-index: 2;
  }
  .monitor-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: 3;
    padding: 20px;
    .monitor-header {
      display: flex;
      width: 100%;
      .load-icon {
        margin-left: 15px;
        margin-top: 17px;
        width: 71px;
        height: 23px;
      }
      .structure {
        flex-grow: 1;
        width: 100%;
        height: 250px;
        position: relative;
        .alert-wrapper {
          position: absolute;
          .alert {
            width: 24px;
            height: 24px;
          }
        }
      }
      .tip {
        width: 41px;
        height: 40px;
        margin-top: 12px;
      }
    }
    .monitor-status {
      display: flex;
      margin: 0 12px;
      margin-top: 30px;
      &-wrapper {
        width: 32%;
      }
      &-item {
        width: 100%;
        position: relative;
        &-title {
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          text-align: left;
          font-style: normal;
          position: absolute;
          left: 15%;
          top: 2px;
        }
        .timer {
          position: absolute;
          right: 10px;
          bottom: 0px;
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 400;
          font-size: 8px;
          color: #ffffff;
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
      }
      .status-title-img {
        width: 100%;
        height: 30px;
      }
    }
    .monitor-count {
      display: flex;
      margin: 0 12px;
      margin-top: 30px;
      &-item {
        width: 313px;
        margin-right: 10px;
        margin-top: 15px;
        position: relative;
        .count-img {
          width: 100%;
          height: 45px;
        }
        &-title {
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 500;
          font-size: 13px;
          color: #ffffff;
          line-height: 45px;
          text-align: left;
          font-style: normal;
          display: flex;
          justify-content: space-between;
          position: absolute;
          left: 0;
          right: 0;
          padding: 0 13px;
          top: 0;
          .num {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 18px;
            color: #69d9fe;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      &-status {
        position: relative;
        margin-top: 10px;
        .empty-bg-img {
          width: 313px;
          height: 111px;
        }
        &-desc {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 3;
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 500;
          padding: 20px;
          font-size: 13px;
          color: #ffffff;
          text-align: left;
          font-style: normal;
          .title {
            margin-bottom: 10px;
          }
          .num {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 18px;
            font-style: normal;
            margin-bottom: 10px;
            span {
              color: #69d9fe;
            }
          }
        }
      }
    }

    .monitor-position {
      display: flex;
      width: 100%;
      padding-left: 28px;
      padding-right: 42px;
      margin-top: 10px;
      position: relative;
      &-left {
        position: relative;
        &-title {
          position: absolute;
          top: 0;
          left: 25%;
          top: 5px;
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 500;
          font-size: 10px;
          color: #ffffff;
          text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
          text-align: left;
          font-style: normal;
        }
      }
      &-right {
        &-item {
          margin-bottom: 10px;
          position: relative;
        }
        .green {
          color: #24eacd;
        }
        .blue {
          color: #00b5ff;
        }
        &-desc {
          position: absolute;
          left: 0;
          top: 0;
          padding-left: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 10px;
          line-height: 28px;
          text-align: left;
          font-style: normal;
          .run-title {
            margin-left: 5px;
          }
          .run-num {
            margin-left: 30px;
          }
        }
      }
    }
    .monitor-status-run {
      background: url("../../../../assets/cleaning/battery-bg.png") no-repeat 0
        0;
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      .battery {
        width: 25px;
        height: 30px;
        margin-left: 10px;
        margin-right: 30px;
      }
    }
  }
}
</style>
